import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Select, InputNumber, Input } from 'ant-design-vue';
export const columns: BasicColumn[] = [
  {
    title: '排序',
    dataIndex: 'px',
    width: 60,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '字段名',
    dataIndex: 'fieldName',
    width: 100,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '字段描述',
    dataIndex: 'title',
    width: 100,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '允许空',
    dataIndex: 'canNull',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        disabled: record['type'] == 'checkbox' ? true : false,
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '字段类型',
    dataIndex: 'fieldType',
    width: 120,
    ellipsis: true,
    resizable: true,
  },
  {
    title: '默认值',
    dataIndex: 'defaultValue',
    width: 120,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      // console.log({ text, record, column });
      return h(Input, {
        value: text,
        style: 'width:100%',
        readonly:
          record['defaultType'] == 1 ||
          record['type'] == 'CALCULATOR' ||
          record['type'] == 'DATE' ||
          record['type'] == 'DATE_TIME'
            ? true
            : false,
        onChange: (e) => {
          console.log('onChange defaultValue', e);
          const field: any = column.dataIndex;
          record[field] = e.srcElement.value;
        },
      });
    },
  },
  {
    title: '只读',
    dataIndex: 'isReadonly',
    width: 80,
    ellipsis: true,
    resizable: true,
    // helpMessage: '是否只读',
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '是',
            value: true,
          },
          {
            label: '否',
            value: false,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '只读类型',
    dataIndex: 'readOnlyType',
    width: 120,
    ellipsis: true,
    resizable: true,
    // helpMessage: '只读类型',
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '不限',
            value: '',
          },
          {
            label: '仅添加时',
            value: '0',
          },
          {
            label: '仅编辑时',
            value: '1',
          },
          {
            label: '仅编辑引用记录时',
            value: '2',
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '控件类型',
    dataIndex: 'ctlType',
    width: 150,
    ellipsis: true,
    resizable: true,
    slots: { customRender: 'ctlType' },
  },
  {
    title: '参与查询',
    dataIndex: 'canQuery',
    width: 100,
    ellipsis: true,
    resizable: true,
    helpMessage: '在模块的查询条件中配置',
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
          {
            label: '辅助',
            value: 2,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '唯一',
    dataIndex: 'isUnique',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '否',
            value: 0,
          },
          {
            label: '全局唯一',
            value: 1,
          },
          {
            label: '嵌套唯一',
            value: 2,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '查询列表显示',
    dataIndex: 'canList',
    width: 120,
    ellipsis: true,
    resizable: true,
    helpMessage: '在查询设计器的查询结果中显示',
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '显示于手机',
    dataIndex: 'isMobileDisplay',
    width: 100,
    ellipsis: true,
    resizable: true,
    ifShow: false,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '宽度',
    dataIndex: 'width',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(InputNumber, {
        value: text,
        style: 'width:100%',
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '辅助字段',
    dataIndex: 'isHelper',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '隐藏',
    dataIndex: 'isHide',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '否',
            value: 0,
          },
          {
            label: '查看及编辑时',
            value: 1,
          },
          {
            label: '仅编辑时',
            value: 2,
          },
          {
            label: '仅添加时',
            value: 3,
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '比较',
    dataIndex: 'morethanMode',
    width: 100,
    ellipsis: true,
    resizable: true,
    customRender: ({ text, record, column }) => {
      return h(Select, {
        value: text,
        style: 'width:100%',
        options: [
          {
            label: '无',
            value: '',
          },
          {
            label: '>',
            value: '>',
          },
          {
            label: '>=',
            value: '>=',
          },
          {
            label: '<',
            value: '<',
          },
          {
            label: '<=',
            value: '<=',
          },
          {
            label: '=',
            value: '=',
          },
        ],
        onChange: (value) => {
          const field: any = column.dataIndex;
          record[field] = value;
        },
      });
    },
  },
  {
    title: '比较字段',
    dataIndex: 'moreThan',
    width: 150,
    ellipsis: true,
    resizable: true,
    slots: { customRender: 'moreThan' },
  },
];

export const searchFormSchema: FormSchema[] = [];

export const formSchema: FormSchema[] = [
  {
    field: 'name',
    label: '编号名称',
    required: true,
    component: 'Input',
    colProps: { span: 24 },
  },
  {
    field: 'curValue',
    label: '当前值',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      readonly: true,
    },
  },
  {
    field: 'title3',
    label: '规则设置',
    component: 'Divider',
    colProps: { span: 24 },
  },
  {
    field: 'prefixValue',
    label: '前缀',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: ({ formModel }) => {
      return {
        onChange: (e) => {
          console.log('value', e, formModel);
          formModel['prefixValue'] = e.target.value;
          formModel['template'] = resetTemplate(formModel);
        },
      };
    },
  },
  {
    field: 'dept',
    label: '部门',
    component: 'Checkbox',
    colProps: { span: 24 },
    componentProps: ({ formModel }) => {
      return {
        onChange: (e) => {
          console.log('value', e, formModel);
          formModel['dept'] = e.target.checked;
          formModel['template'] = resetTemplate(formModel);
        },
      };
    },
  },
  {
    field: 'yearNum',
    label: '年号',
    component: 'RadioGroup',
    colProps: { span: 24 },
    componentProps: ({ formModel }) => {
      return {
        options: [
          {
            label: '无',
            value: '',
          },
          {
            label: '年',
            value: '{date:yyyy}',
          },
          {
            label: '年月',
            value: '{date:yyyy-MM}',
          },
          {
            label: '年月日',
            value: '{date:yyyy-MM-dd}',
          },
        ],

        onChange: (e) => {
          console.log('value', formModel);
          formModel['yearNum'] = e.target.value;
          formModel['template'] = resetTemplate(formModel);
        },
      };
    },
  },
  {
    field: 'yearNumReset',
    label: '数值重置',
    component: 'RadioGroup',
    colProps: { span: 24 },
    componentProps: ({ formModel }) => {
      return {
        options: [
          {
            label: '不重置',
            value: '{num}',
          },
          {
            label: '按年',
            value: '{num:year}',
          },
          {
            label: '按月',
            value: '{num:month}',
          },
          {
            label: '按日',
            value: '{num:day}',
          },
        ],
        onChange: (e) => {
          console.log('value', formModel);
          formModel['yearNumReset'] = e.target.value;
          formModel['template'] = resetTemplate(formModel);
        },
      };
    },
  },
  {
    field: 'template',
    label: '规则',
    component: 'Input',
    defaultValue: '{num}',
    colProps: { span: 24 },
    componentProps: {
      readonly: true,
    },
  },
  {
    field: 'length',
    label: '补齐位数',
    component: 'Input',
    helpMessage: '数字长度位数，不足将在左侧补0，置为0表示不需要补位',
    colProps: { span: 24 },
  },
  {
    field: 'itemSeparator',
    label: '分隔符',
    component: 'Select',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '无',
          value: '',
        },
        {
          label: '减号',
          value: '-',
        },
        {
          label: '下划线',
          value: '_',
        },
        {
          label: '竖线',
          value: '|',
        },
      ],
    },
  },
  {
    field: 'yearDigit',
    label: '年份位数',
    component: 'Select',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '4',
          value: '4',
        },
        {
          label: '2',
          value: '2',
        },
      ],
    },
  },
];

export const resetTemplate = (model) => {
  const prefix = model['prefixValue'];
  const dept = model['dept'];
  const yearNum = model['yearNum'];
  const yearNumReset = model['yearNumReset'];
  let templateValue = '';

  if (prefix) {
    templateValue += prefix;
  }
  if (dept) {
    templateValue += '{dept}-';
  }

  if (yearNum) {
    templateValue += yearNum + '-';
  }
  if (yearNumReset) {
    templateValue += yearNumReset;
  }
  return templateValue;
};
